<template>
  <div
    class="box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <img src="../../assets/images/login3.png" alt="" class="bg" />
    <div class="con">
      <div class="title">
        <img :src="appLogo" alt="" />
        <p>
          推荐人：<span>{{ nickName }}</span>
        </p>
      </div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        :rules="rules"
        ref="formLabelAlign"
      >
        <el-form-item prop="name">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="请输入注册手机号"
            clearable
          >
            <i
              slot="prefix"
              class="iconfont icon-icon"
              style="line-height:50px;color:#756ab6;"
            ></i
          ></el-input>
        </el-form-item>
        <el-form-item prop="region">
          <el-input
            v-model="formLabelAlign.region"
            placeholder="请设置登录密码"
            show-password
          >
            <i
              slot="prefix"
              class="iconfont icon-mima"
              style="line-height:50px;color:#756ab6;"
            ></i
          ></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-input
            v-model="formLabelAlign.type"
            placeholder="请输入短信验证码"
          >
            <i
              slot="prefix"
              class="iconfont icon-dunpai"
              style="line-height:50px;color:#756ab6;"
            ></i>
          </el-input>
          <div class="code" v-if="code" @click="get">获取验证码</div>
          <div class="code" v-else @click="gain">
            重新获取(<span>{{ num }}</span
            >)s
          </div>
        </el-form-item>
        <button class="resg" @click="sub('ruleForm')">立即注册</button>
      </el-form>
      <div class="down">
        <button @click="selectDownloadHtml('ios')">ios下载</button>
        <button @click="selectDownloadHtml('Android')">Android下载</button>
      </div>
      <p class="end">下载请复制链接在浏览器打开，微信暂不支持</p>
    </div>
  </div>
</template>

<script>
import { toRegisterNew, selectDownloadHtml, registerYzm } from '../../local/api'
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      rules: {
        name: [{ required: true, validator: this.ValidPhone, trigger: 'blur' }],
        region: [{ required: true, validator: this.ValidPwd, trigger: 'blur' }],
        type: [{ required: true, validator: this.ValidCode, trigger: 'blur' }]
      },
      code: true,
      num: 30,
      sign: '',
      iosUrl: '',
      AndroidUrl: '',
      key: '',
      parentId: '',
      oBrandId: '',
      appLogo: '',
      nickName: ''
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('data')))
    this.key = JSON.parse(localStorage.getItem('data')).key
    this.parentId = JSON.parse(localStorage.getItem('data')).userId
    this.oBrandId = JSON.parse(localStorage.getItem('data')).oBrandId
    this.appLogo = JSON.parse(localStorage.getItem('data')).appLogo
    this.nickName = JSON.parse(localStorage.getItem('data')).nickName

    console.log(
      this.key,
      this.parentId,
      this.oBrandId,
      this.appLogo,
      this.nickName,
      '8987'
    )
  },
  methods: {
    // 注册
    async sub() {
      // 加密
      this.sign = this.$md5(
        'oBrandId=' +
          this.oBrandId +
          '&parentId=' +
          this.parentId +
          '&phone=' +
          this.formLabelAlign.name +
          '&pwd=' +
          this.formLabelAlign.region +
          '&verificationCode=' +
          this.formLabelAlign.type +
          '&key=' +
          this.key
      )

      console.log(this.sign)
      this.loading = true
      // 发送请求
      const data = await toRegisterNew(
        qs.stringify({
          phone: this.formLabelAlign.name, // this.formLabelAlign.name
          pwd: this.formLabelAlign.region, // this.formLabelAlign.region
          verificationCode: this.formLabelAlign.type, // this.formLabelAlign.type
          oBrandId: this.oBrandId,
          parentId: this.parentId,
          key: this.key,
          sign: this.sign
        })
      )
      this.$message(`${data.msg}`)
      console.log(data)
    },
    // 下载
    async selectDownloadHtml(phone) {
      const data = await selectDownloadHtml(
        qs.stringify({ oBrandId: this.oBrandId })
      )
      console.log(data)
      this.iosUrl = data.data.iosUrl
      this.AndroidUrl = data.data.androidUrl
      if (phone === 'ios') {
        // window.location.href = this.iosUrl
        this.$router.push({ path: './ios', query: { ios: this.iosUrl } })
      } else {
        // window.location.href = this.AndroidUrl
        this.$router.push({
          path: './Android',
          query: { androidUrl: this.AndroidUrl }
        })
      }
    },
    // 发送验证码
    async get() {
      this.code = !this.code
      const time = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(time)
        }
      }, 1000)
      const data = await registerYzm(
        qs.stringify({
          phone: this.formLabelAlign.name,
          oBrandId: this.oBrandId
        })
      )
      console.log(data)
    },
    // 重新获取验证码
    async gain() {
      if (this.num === 0) {
        this.num = 30
        const data = await registerYzm(
          qs.stringify({
            phone: this.formLabelAlign.name,
            oBrandId: this.oBrandId
          })
        )
        const time = setInterval(() => {
          this.num--
          if (this.num === 0) {
            clearInterval(time)
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  .bg {
    width: 100%;
    height: 100%;
  }
  .con {
    width: 100%;
    position: absolute;
    top: 9%;
    left: 50%;
    margin-left: -50%;
    text-align: center;
    .logo {
      width: 70px;
      //   margin-bottom: 20px;
      border-radius: 10px;
      box-shadow: 1px 5px 10px rgb(71, 71, 71);
    }
    .title {
      text-align: center;
      color: #fff;
      margin-top: 5%;
      div {
        margin-bottom: 9%;
        margin-left: 10%;
        font-size: 16px;
      }
      h3 {
        font-size: 40px;
        margin-bottom: 10px;
        font-weight: bolder;
      }
      p {
        margin-bottom: 10%;
      }
    }
    .transparen {
      position: absolute;
      width: 73%;
    }
    .el-form {
      background-color: #fff;
      width: 73%;
      margin: auto;
      border-radius: 15px;
      padding: 50px 20px;
      /deep/.el-form-item__label {
        line-height: 0;
      }
      /deep/.el-input__inner {
        margin-top: 5px;
      }
      /deep/.el-input__suffix {
        line-height: 50px;
      }
      .el-form-item {
        position: relative;
        .code {
          position: absolute;
          top: 5px;
          right: 8px;
          color: #756ab6;
        }
      }
      .resg {
        width: 100%;
        border: none;
        height: 40px;
        color: #fff;
        outline: none;
        background: #756ab6;
      }
    }
  }
  .down {
    width: 73%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    button {
      outline: none;
      color: #fff;
      border: none;
      background-color: transparent;
      margin-top: 30px;
    }
  }
  .end {
    text-align: center;
    margin: 30px;
    color: #828195;
  }
}
</style>
